<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./index.css">
</head>
<div id="wrapper">

</div>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>


        var $Div = $('#wrapper');
        var logistics;
        var isShow = [false, false, false, false];

        (function () {
            return $.ajax({
                url: 'http://127.0.0.1:5001/api/login',
                type: 'POST',
                xhrFields: {
                    withCredentials: true
                },
                data: {
                    username: 'dafeige',
                    password: '123456'
                }
            })
        })().then(function (res) {
            if (res.status === 1) {
                return $.ajax({
                    url: 'http://127.0.0.1:5001/api/getIndent',
                    xhrFields: {
                        withCredentials: true
                    },
                    type: 'GET',
                })
            } else {
                alert(res.msg)
            }
        }).then(function (res) {
            var def = $.Deferred();
            if (res.status === 1) {
                $.each(res.data, function (index, ele) {
                    var tempTime = ele.createdAt.split('T');
                    var time = tempTime[0] + ' ' + tempTime[1].substr(0, tempTime[1].indexOf('.'));
                    var $Li = $('<li class="item"></li>');
                    var $DivLog = $('<div class="log_wrapper"></div>');
                    var $Img = $('<img class="item_img" src="' + ele.imgUrl + '"></img>');
                    var $Btn = $('<div class="logistics">物流信息<p class="btn iconfont icon-xia"></p></div>');
                    $Btn.data('id', ele.ordersId);
                    var $Details = $(`<div class="item_details">
                    <p class="name"> ${ele.name} </p>
                    <p class="target_site"> 收货地址： ${ele.targetSite} </p>
                    <p class="price"> <span>价格:</span> <span>${ele.price} x ${ele.num} </span></p>
                    <p class="time"> ${time} </p>
                    </div>`);
                    $Li.append($Img).append($Details).append($Btn);
                    $Div.append($Li);
                    $Div.append($DivLog);
                });
                $('.logistics').each(function (index, item) {
                    $(item).click(function () {
                        def.notify($(this), index);
                    })
                });
                return def.promise();
            } else {
                alert(res.msg);
            }
        }).then(function () {
        }, function () {
        }, function (ele, index) {
            var id = ele.data('id');
            $.ajax({
                url: `http://127.0.0.1:5001/api/getLogistics?id=${id}`,
                xhrFields: {
                    withCredentials: true
                },
                type: 'GET',
            }).then(function (res) {
                if (res.status === 1) {
                    var logistics = JSON.parse(res.data.logistics);
                    if (isShow[index]) {
                        $('.log_wrapper').eq(index).hide('slow');
                        $('.log_wrapper').eq(index).children().remove();
                        $('.logistics').eq(index).children('.btn').removeClass('icon-top').addClass('icon-xia');
                        isShow.forEach(function (item, j) {
                            isShow[j] = false
                        })
                    } else {
                        var logBox = $('<div class="log_box"></div>')
                        $.each(logistics, function (i, item) {
                            var $Logistics = $(`<div class="log_item">
                              <div>${item.time}</div>
                                <img src="./imgs/2.png" class="log_icon"></img>
                                <div>${item.site}</div>
                              </div>`);
                            logBox.append($Logistics);
                            $('.log_wrapper').eq(index).css({ height: 140 * logistics.length }).show('slow');
                            $('.log_wrapper').eq(index).append(logBox);
                            $('.log_wrapper').eq(index).siblings('.log_wrapper').hide('slow').children().remove()
                        });
                        isShow.forEach(function (item, j) {
                            if (j === index) {
                                isShow[j] = true;
                                $('.logistics').eq(j).children('.btn').removeClass('icon-xia').addClass('icon-top');
                            } else {
                                isShow[j] = false
                                $('.logistics').eq(j).children('.btn').removeClass('icon-top').addClass('icon-xia');
                            }
                        });
                    }
                } else {

                }
            })
        })


    // var $Div = $('#wrapper');
    // var logistics;
    // var isShow = [false, false, false, false];
    // $.ajax({
    //   url: 'http://127.0.0.1:5001/api/login',
    //   type: 'POST',
    //   xhrFields: {
    //     withCredentials: true
    //   },
    //   data: {
    //     username: 'dafeige',
    //     password: '123456'
    //   },
    //   success: function (res) {
    //     if (res && res.status === 1) {
    //       $.ajax({
    //         url: 'http://127.0.0.1:5001/api/getIndent',
    //         xhrFields: {
    //           withCredentials: true
    //         },
    //         type: 'GET',
    //         success: function (res) {
    //           if (res.status === 1) {

    //             res.data.forEach(function (ele, index) {
    //               var tempTime = ele.createdAt.split('T');
    //               var time = tempTime[0] + ' ' + tempTime[1].substr(0, tempTime[1].indexOf('.'));
    //               var $Li = $('<li class="item"></li>');
    //               var $DivLog = $('<div class="log_wrapper"></div>');
    //               var $Img = $('<img class="item_img" src="' + ele.imgUrl + '"></img>');
    //               var $Btn = $('<div class="logistics">物流信息<p class="btn iconfont icon-xia"></p></div>');
    //               $Btn.data('id', ele.ordersId);
    //               var $Details = $(`<div class="item_details">
    //                 <p class="name"> ${ele.name} </p>
    //                 <p class="target_site"> 收货地址： ${ele.targetSite} </p>
    //                 <p class="price"> <span>价格:</span> <span>${ele.price} x ${ele.num} </span></p>
    //                 <p class="time"> ${time} </p>
    //                 </div>`);
    //               $Li.append($Img).append($Details).append($Btn);
    //               $Div.append($Li);
    //               $Div.append($DivLog);
    //             });
    //             $('.logistics').each(function (index, item) {
    //               $(item).click(function () {
    //                 logistics = null;
    //                 var id = $(this).data('id')
    //                 $.ajax({
    //                   url: `http://127.0.0.1:5001/api/getLogistics?id=${id}`,
    //                   xhrFields: {
    //                     withCredentials: true
    //                   },
    //                   type: 'GET',
    //                   success: function (res) {
    //                     logistics = JSON.parse(res.data.logistics);
    //                     if (isShow[index]) {
    //                       $('.log_wrapper').eq(index).hide('slow');
    //                       $('.log_wrapper').eq(index).children().remove();
    //                       $('.logistics').eq(index).children('.btn').removeClass('icon-top').addClass('icon-xia');
    //                       isShow.forEach(function(item, j) {
    //                         isShow[j] = false

    //                       })
    //                     } else {
    //                       var logBox = $('<div class="log_box"></div>')
    //                       $.each(logistics, function (i, item) {
    //                         var $Logistics = $(`<div class="log_item">
    //                           <div>${item.time}</div>
    //                             <img src="./imgs/2.png" class="log_icon"></img>
    //                             <div>${item.site}</div>
    //                           </div>`);
    //                         logBox.append($Logistics);
    //                         $('.log_wrapper').eq(index).css({ height: 140 * logistics.length }).show('slow');
    //                         $('.log_wrapper').eq(index).append(logBox);
    //                         $('.log_wrapper').eq(index).siblings('.log_wrapper').hide('slow').children().remove()
    //                       });
    //                       isShow.forEach(function(item, j) {
    //                         if (j === index) {
    //                           isShow[j] = true;
    //                           $('.logistics').eq(j).children('.btn').removeClass('icon-xia').addClass('icon-top');
    //                         } else {
    //                           isShow[j] = false
    //                           $('.logistics').eq(j).children('.btn').removeClass('icon-top').addClass('icon-xia');
    //                         }
    //                       });
    //                     }
    //                   }
    //                 })
    //               })
    //             })
    //           } else {
    //             window.alert(res.msg)
    //           }
    //         }
    //       })
    //     } else {
    //       window.alert(res.msg)
    //     }
    //   }
    // });

    </script>
</body>

</html>